<template>
  <div>
    <el-card class="crumbs-card">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/main/' }">首页</el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: '/main/first' }"
            >一级菜单1</el-breadcrumb-item
          > -->
        </el-breadcrumb>
      </div>
    </el-card>

    <div class="calendar-container">
      <div class="canlendar">
        <el-calendar :range="dateRange"> </el-calendar>
      </div>
    </div>
    <div class="static-container">
      <el-col :span="6">
        <div>
          <el-statistic title="文章数量">
            <template slot="formatter"> 😎{{ articleNum }}</template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="点赞数量">
            <template slot="formatter"> 😊{{ favNum }} </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="评论数量">
            <template slot="formatter"> 😂{{ commentNum }} </template>
          </el-statistic>
        </div>
      </el-col>

      <el-col :span="6">
        <div>
          <el-statistic title="站点统计（得上服务器）">
            <template slot="formatter">😢还未开发</template>
          </el-statistic>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
import * as staticApi from '@/api/home';
export default {
  name: 'second',
  data() {
    let currentDate = new Date();

    // 获取当前周的第一天（周一）
    let firstDayOfWeek = new Date(currentDate);
    firstDayOfWeek.setDate(
      currentDate.getDate() -
        currentDate.getDay() +
        (currentDate.getDay() === 0 ? -6 : 1)
    );

    // 获取三周后的日期
    let threeWeeksLater = new Date(firstDayOfWeek);
    threeWeeksLater.setDate(firstDayOfWeek.getDate() + 20); // 3 weeks * 7 days - 1 day

    // 格式化日期为字符串（YYYY-MM-DD）
    let formattedFirstDay = firstDayOfWeek.toISOString().split('T')[0];
    let formattedLastDay = threeWeeksLater.toISOString().split('T')[0];

    return {
      dateRange: [formattedFirstDay, formattedLastDay],
      commentNum: 0,
      articleNum: 0,
      favNum: 0,
    };
  },

  methods: {
    async article() {
      try {
        const res = await staticApi.getArticle();
        console.log(res);
        this.articleNum = res.data;
      } catch (e) {
        console.error(e.message);
      }
    },

    async comment() {
      try {
        const res = await staticApi.getComment();
        this.commentNum = res.data;
      } catch (e) {}
    },

    async fav() {
      try {
        const res = await staticApi.getFav();
        this.favNum = res.data;
      } catch (e) {}
    },
  },

  mounted() {
    console.log('?>?');
    this.article();
    this.comment();
    this.fav();
  },
};
</script>

<style scoped>
.calendar-container {
  padding: 10px;
  border: #ccc 1px solid;
  border-radius: 15px;
  margin: 20px auto;
  position: relative;
  width: 60%; /* Adjust the width as needed */
  height: 400px; /* Adjust the height as needed */
  background-color: #fff; /* Set the background color as needed */
  border: 1px solid #ccc; /* Optional border style */
  z-index: 1000; /* Adjust the z-index as needed to ensure it's above other elements */
}

.static-container {
  padding: 10px;
  border: #ccc 1px solid;
  border-radius: 15px;
  margin: 20px auto;
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 横排排序，子元素之间平均分布 */
  align-items: center; /* 垂直居中对齐，可选 */
  position: relative;
  width: 60%;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1000;
}
.is-selected {
  background-color: #337ab7; /* 你想要的选中日期的颜色 */
  color: #fff; /* 文本颜色，可选 */
}
</style>
